<template>
    <div class="max">
        <but></but>
        <div class="totsize">
            <span>购物车</span>
        </div>
        <div class="below-head"></div>
       
        <div class="items">
            <div class="commodity">
                <div class="commodity-head">
                        <van-checkbox>OMINI定制</van-checkbox>
                </div>
                <div class="commodity-body">
                    <div>
                            <van-checkbox ></van-checkbox>
                    </div>
                    <div style="float: left;">
                        <img style="width:100px;height:100px;border-radius: 7px;" src="https://cn.bing.com/ck/a?!&&p=67793e5c34e41f40JmltdHM9MTY2MjMzNjAwMCZpZ3VpZD0wNmY0N2NhNi02M2FhLTZiZDUtMDM1NS02ZDNiNjJjYzZhZjAmaW5zaWQ9NTUxNw&ptn=7&hsh=3&fclid=06f47ca6-63aa-6bd5-0355-6d3b62cc6af0&u=a1L2ltYWdlcy9zZWFyY2g_cT0lRTklQTMlOEUlRTYlOTklQUYlRTUlOUIlQkUlRTclODklODclRTUlQTQlQTclRTUlODUlQTgmRk9STT1JUUZSQkEmaWQ9MzM3RkZFNTA1NzBDQkVBMEUxMTNCRUMxNjk0MUI1QzlCMzJCODQxMg&ntb=1" />
                        
                    </div>
                    <div>
                        <span>法国BDM大圆圈耳环女网红欧美夸张时尚耳圈</span>
                        <div style="position: relative;color: #aaa39d;background-color: #f8f8f8;margin-top:15px;height: 40px;border-radius: 7px;line-height: 40px;">
                            <span>淡金色</span>
                            <span>【10cm】</span>
                            <span style="position: absolute;right: 5px;"><van-icon name="arrow-down" /></span>
                        </div>
                    </div>
                </div>
                <div class="commodity-foot">
                    <div style="color:#d1082a;right:120px;position: absolute;font-size:14px">￥539.99</div>
                    <div style="position: absolute;right:10px"><van-stepper  input-width="50px" button-size="18px" /></div>
                </div>
            </div>
            <div style="text-align: center;color:#999;">
                没有更多了哦~
            </div>
            
        </div>
    </div>
             <van-popup style="{ height: '70%' }" round teleport="body">
                <div style="width: 90%;height:90%;margin: 16px;">
                    <div style="height:110px;display: flex;">
                        <img style="width:110px;height:110px;border-radius: 7px;" src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/03/ChMkJ1bKx2KIZ1idABu8GjZCbc0AALHywLZ7AcAG7wy618.jpg"/>
                        <div style="display: flex;flex-wrap: wrap;margin-left:20px;">
                            <span style="height:50px;line-height: 55px;color:red;font-size: 12px;">￥</span>
                            <span style="line-height: 55px;color:#d1082a;font-size: 16px;font-weight: bold;width: 180px;">1213</span>
                            <span style="height:25px;font-size: 12px;color: #aeaeae;width: 200px;">库存171件</span>
                            <span style="height:50px;line-height: 40px;font-size:12px;">已选:"12113" "10cm"</span>
                        </div>
                    </div>
                    <div style="height:60px;line-height: 80px;">颜色分类</div>
                    <div class="colors" style="display:flex;">
                        <div class="vbutton" style="width:80px;height:32px;line-height: 32px;text-align: center;margin-left:10px;" v-for="(item,index) in cor" :class="index==itemType?'highlight':'vbutton'" :key="index" size="small"   @click="changeColor(item,index)">{{item}}</div>
                    </div>
                    <div style="border-bottom: 2px solid #e9e5e5;margin-top: 12px;"></div>
                    <div style="height:60px;line-height: 70px;">尺码</div>
                    <div class="colors" style="display:flex;">
                        <div class="vbutton" style="width:80px;height:32px;line-height: 32px;text-align: center;margin-left:10px;" v-for="(item,index) in lengs" :class="index==itemTypes?'highlight':'vbutton'" :key="index" size="small"   @click="changeLengs(item,index)">{{item}}cm</div>
                    </div>
                    <div style="border-bottom: 2px solid #e9e5e5;margin-top: 12px;"></div>
                    <van-icon name="close" size="26px" style="right:18px;top:20px;position: absolute;"/>
                    <van-button round type="danger" style="width:90%;margin: 30% 0 0 5%;">确定</van-button>
                </div>
            </van-popup> 
        
         <div class="below-foot">
            <div style="margin: 19px;">
                    <van-checkbox>全选</van-checkbox>
            </div>
            <span style="margin-left:60px">合计:</span>
            <span style="color:red">￥539.99</span>
            <div style="margin: -5px 0px 0px 40px;">
                <router-link :to="{ name: 'Ordersettlement'}"> <van-button type="danger" size="small" style="border-radius: 30px;width: 80px;">结算</van-button></router-link>
               
            </div>
        </div>
    <navBar style="z-index: 999;"></navBar>
</template>
<script setup lang="ts">
import { ref,onMounted,reactive,watch } from 'vue';
import { useRouter } from 'vue-router';
import { Image as VanImage } from "vant";
  import { Checkbox, CheckboxGroup } from "vant";
import router from '@/router';
import but from '@/componets/but.vue'
 
</script>
<style scoped>
.max{margin: 0;padding: 0;background-color: #fff;}
.below-head{width: 100%;height: 70px;position: absolute; background-color: #c1ab96;margin-bottom: 10px;top:99px}
.below-foot{background-color: #fff;width: 100%;height:55px;border:3px solid #e6e6e4;position: fixed;z-index: 10;bottom: 50px;line-height: 55px;display: flex;}
.totsize{width: 100%;height: 100px;background-color: #c1ab96;position: fixed;z-index: 10;}
.totsize span{color: white;font-weight: bold;font-size: 20px;line-height: 120px;margin-left: 19px;}
.items{
    width: 90%;position: relative;display: flex;z-index: 9;;flex-direction: column;left: 5%;padding-top: 100px;padding-bottom: 35%;
}
.commodity{
    width: 100%;height: 190px;border-radius: 10px;background-color: #ffffff;box-shadow: 0px 0px 15px -7px;margin-bottom: 12px;
    /* display: flex; */
}
.commodity-head{width: 100%;margin: 4%;}
.commodity-body{display: flex;}
.commodity-body div:first-child{margin: 10% 4px  10px;float: left;}
.commodity-body div:nth-child(3){float: left;width: 150px;padding:0 10px;font-size: 14px;}
.commodity-foot{display: flex;position: relative;}
.vbutton{
    color: black;
    background: #f8f8f8;
    border:1px solid #f8f8f8
}
.highlight {
    background: #fefbf8;
    color: black;
    border:1px solid #f0d5b8
}

</style>